<template>
  <div class="editForm-wrapper">
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="visible"
    >
      <el-form
        :model="editform"
        ref="editform"
        v-loading="loading"
        label-width="79px"
      >
        <el-form-item
          v-model="editform.truckNumber"
          prop="truckNumber"
          class="plateForm"
          label="车牌号:"
          required
        >
<!--          <span-->
<!--            style="-->
<!--              position: absolute;-->
<!--              left: -75px;-->
<!--              color: #606266;-->
<!--              font-size: 16px;-->
<!--            "-->
<!--            ><span style="color: #f56c6c; font-size: 16px; margin-right: 4px"-->
<!--              >*</span-->
<!--            >车牌号:</span-->
<!--          >-->
          <section class="hasNumber" @click="editCarNumber">
            <span v-if="!truckNumber">点击填写车牌号</span>
            {{ truckNumber }}
          </section>
          <span
            v-if="verify"
            style="
              position: absolute;
              color: #f56c6c;
              font-size: 12px;
              line-height: 20px;
            "
            >请您输入车牌号</span
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footer-input">
          <el-button type="primary" @click="doSubmit()" v-noMoreClick
            >确定</el-button
          >
          <el-button @click="visible = false">取消</el-button>
        </div>
      </span>
    </el-dialog>
    <PlateDialog
      ref="plateDialog"
      @refreshDataList="getTruckNumber"
    ></PlateDialog>
  </div>
</template>
<script>
import PlateDialog from "@/components/plate/plate";
export default {
  components: {
    PlateDialog,
  },
  data() {
    return {
      title: "新增绿通车牌",
      editform: {
          truckNumber: ""
      },
      truckNumber: "",
      truckNumberArray: [],
      verify: false,
      visible: false,
      loading: false,
    };
  },
  methods: {
  	handleClose(done) {
		this.$Msg.confirm({
			title:'您确定要关闭吗？',
			content:this.GLOBAL.FORM_CLOSE_TIPS,
			confirmCall:()=>{
				done();
			}
		})
	},
    doSubmit() {
        // this.$refs['editform'].validate((valid) => {
          if (this.truckNumberArray.length) {
            this.loading = true
              this.verify = false
            this.$http({
              url: `/truck/truck/saveGreen`,
              method: 'post',
              data: this.editform
            }).then(({data}) => {
              if (data && data.code === '200') {
                this.visible = false
                this.$message.success(data.message)
                this.$emit('refreshDataList')
              }
            })
          } else {
              this.verify = true
          }
        // })
    },
    editCarNumber() {
    	console.log(115,this.truckNumberArray)
      this.$nextTick(() => {
        console.log(this.truckNumberArray);
        if (this.truckNumberArray.length > 0) {
          this.$refs.plateDialog.dialogVisible = true;
          console.log(this.truckNumberArray);
          this.$refs.plateDialog.val = this.truckNumberArray;
          console.log(this.$refs.plateDialog.val);
        } else {
        	console.log(124)
        	this.$refs.plateDialog.initNumber();
          this.$refs.plateDialog.dialogVisible = true;
        }

        //        this.val = this.$refs.plateDialog.val
      });
    },
    init(method) {
      if (method == "add") {
      	this.editform.truckNumber=''
        this.visible = true;
      }
    },
    getTruckNumber(e) {
      this.truckNumberArray = e;
      console.log(this.truckNumberArray);
      this.truckNumber = e.join("");
      this.editform.truckNumber = this.truckNumber

    },
  },
    watch: {
        truckNumberArray () {
            if (this.truckNumberArray.length) {
                this.verify = false
            }
        }
    }
};
</script>
<style lang="scss" scoped>
 @import '@/assets/scss/config.scss';
.hasNumber {
  cursor: pointer;
  width: 260px;
  height: 32px;
  background: $--color-primary-liyu;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  line-height: 32px;
  span {
    font-size: 14px;
  }
}
</style>
